//详情页吸顶
var inner=document.getElementById("inner");
window.onscroll = function(){

      var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
      var height=screen.height+140;
      if(scroll_top > height){

            inner.style.display = "block";
      }else{

            inner.style.display = "none";
      }
}


function Magnifier(){
    // small 部分元素; 
    this.samll_wrapper_ele = document.querySelector(".small-wrapper");
    this.focus_ele = document.querySelector(".focus");
    
    this.big_wrapper_ele = document.querySelector(".big-wrapper");
    // big 部分元素; 
    this.big_img_ele = this.big_wrapper_ele.querySelector("img");
//     console.log(this.samll_wrapper_ele,this.focus_ele,this.big_img_ele,this.big_wrapper_ele);
}
Magnifier.prototype.bindEvent = function(){
    // 存实例对象 : 
    var magnifier_instance = this;

    this.samll_wrapper_ele.onmouseover = function(){
          magnifier_instance.toggle("show");
    }
    this.samll_wrapper_ele.onmouseout = function(){
          magnifier_instance.toggle("hide");
    }

    this.samll_wrapper_ele.onmousemove = function( evt ){
          var e = evt || event;
          magnifier_instance.move( e.offsetX , e.offsetY );
    }
}
Magnifier.prototype.toggle = function( type ){
    switch( type ){
          case "show" : 
                this.focus_ele.style.display = "block";
                this.big_wrapper_ele.style.display = "block";
                break;
          case "hide" :
                this.focus_ele.style.display = "none";
                this.big_wrapper_ele.style.display = "none";
                break;
    }
}
// 移动涉及的功能很复杂 : 
// - 边界检测 :
//   - 如果left值小于了最小值就让left值为最小值;  0 
//   - 如果left值大于了最大值就让left值为最大值;  

// - 鼠标获取位坐标的参照物和元素获取坐标的参照物是否相同; 
// - 给samll部分贴个膜, 让鼠标获取位置位置的参照物和 focus 一致：
Magnifier.prototype.move = function( x , y ){
      // console.log(x,y);
    var _left = x - 130;
    var _top  = y - 130

    // 边界检测 : 判定数据的极值 ; 
    
    _left = _left < 0 ? 0 : _left;
    _top  = _top  < 0 ? 0 : _top;
    // 计算focus的最大移动距离 ; 
    // small的宽度-focus的宽度; 
    // 150 ; 

    _left = _left > 130 ? 130 : _left;
    _top  = _top > 130 ? 130 : _top;


    // 给focus定位 : 
    this.focus_ele.style.left = _left + "px";
    this.focus_ele.style.top  =  _top + "px";


    // 大图运动 : 
    // - 先计算小图left值和top的运动比例; 
    // left/运动的最大值; 

    var _left_prop = _left / 130;
    var _top_prop = _top / 130;

    // 根据比例让大图运动; 


    this.big_img_ele.style.left = - 210 * _left_prop + "px";
    this.big_img_ele.style.top  = - 210 * _top_prop  + "px";
}

new Magnifier().bindEvent();

//TAB切换
var btn_eles=document.querySelectorAll("#tabarea-items li");
var content_eles=document.querySelectorAll(".tabarea dd");
console.log(btn_eles.length,content_eles);
var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
var height=screen.height+120;
for(var i=0;i<btn_eles.length;i++) {
      btn_eles[i].onclick=function(index){
            scrollTo({
                  top : height,
                  behavior: 'smooth'
            });
            console.log(index);
            reset();
            btn_eles[index].className="on";
            content_eles[index].className="active"
      }.bind(null,i);


}

function reset(){
      for(var i=0;i<btn_eles.length;i++){
            btn_eles[i].className="";
            content_eles[i].className="";
      }
}
//渲染数据
